<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单活动抽奖</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <style type="text/tailwindcss">
        @layer utilities {
            .prize-animation {
                animation: bounce 0.5s ease infinite alternate;
            }
            @keyframes bounce {
                from { transform: translateY(0); }
                to { transform: translateY(-10px); }
            }
            .spin-animation {
                animation: spin 0.1s linear infinite;
            }
            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 页面标题 -->
    <header class="bg-blue-600 text-white py-4">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-2xl font-bold">幸运抽奖活动</h1>
            <p class="text-blue-100 mt-1">试试你的运气，赢取精美奖品！</p>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
            <!-- 奖品展示区 -->
            <div class="text-center mb-8">
                <div id="prize-display" class="w-40 h-40 mx-auto bg-blue-50 rounded-full flex items-center justify-center mb-4">
                    <i class="fa fa-gift text-5xl text-blue-500"></i>
                </div>
                <h2 id="prize-text" class="text-xl font-bold text-gray-800">点击开始抽奖</h2>
            </div>
            
            <!-- 抽奖按钮 -->
            <div class="text-center">
                <button id="draw-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition-colors duration-300 flex items-center justify-center mx-auto">
                    <i class="fa fa-random mr-2"></i> 开始抽奖
                </button>
                <p id="draw-status" class="text-gray-500 mt-4 text-sm hidden">每人限抽一次</p>
            </div>
        </div>
        
        <!-- 奖品说明 -->
        <div class="max-w-md mx-auto mt-8 bg-white rounded-lg shadow-sm p-4">
            <h3 class="font-bold text-gray-700 mb-2 flex items-center">
                <i class="fa fa-trophy text-yellow-500 mr-2"></i> 奖品设置
            </h3>
            <ul class="text-gray-600 text-sm space-y-1">
                <li class="flex items-center"><i class="fa fa-star text-yellow-400 mr-2"></i> 一等奖：智能手机一部</li>
                <li class="flex items-center"><i class="fa fa-star text-yellow-400 mr-2"></i> 二等奖：无线耳机一副</li>
                <li class="flex items-center"><i class="fa fa-star text-yellow-400 mr-2"></i> 三等奖：精美保温杯一个</li>
                <li class="flex items-center"><i class="fa fa-star text-yellow-400 mr-2"></i> 参与奖：10元代金券</li>
            </ul>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white text-center py-4 mt-8">
        <p class="text-sm">活动最终解释权归主办方所有</p>
    </footer>

    <script>
        // 奖品列表
        const prizes = [
            { name: "一等奖：智能手机一部", icon: "fa-mobile", color: "text-green-500" },
            { name: "二等奖：无线耳机一副", icon: "fa-headphones", color: "text-blue-500" },
            { name: "三等奖：精美保温杯一个", icon: "fa-coffee", color: "text-yellow-500" },
            { name: "参与奖：10元代金券", icon: "fa-ticket", color: "text-gray-500" }
        ];
        
        // DOM元素
        const drawBtn = document.getElementById('draw-btn');
        const prizeDisplay = document.getElementById('prize-display');
        const prizeText = document.getElementById('prize-text');
        const drawStatus = document.getElementById('draw-status');
        
        // 是否已抽奖
        let hasDrawn = localStorage.getItem('lotteryDrawn') === 'true';
        
        // 初始化页面状态
        if (hasDrawn) {
            const savedPrize = JSON.parse(localStorage.getItem('lotteryPrize'));
            if (savedPrize) {
                showPrize(savedPrize);
            }
            disableDrawButton();
        }
        
        // 抽奖按钮点击事件
        drawBtn.addEventListener('click', startDraw);
        
        // 开始抽奖
        function startDraw() {
            // 禁用按钮防止重复点击
            drawBtn.disabled = true;
            drawBtn.classList.add('opacity-70');
            drawBtn.innerHTML = '<i class="fa fa-circle-o-notch spin-animation mr-2"></i> 抽奖中...';
            
            // 模拟抽奖过程（3秒后出结果）
            setTimeout(() => {
                // 随机选择一个奖品
                const randomIndex = Math.floor(Math.random() * prizes.length);
                const winningPrize = prizes[randomIndex];
                
                // 显示中奖结果
                showPrize(winningPrize);
                
                // 保存抽奖状态
                hasDrawn = true;
                localStorage.setItem('lotteryDrawn', 'true');
                localStorage.setItem('lotteryPrize', JSON.stringify(winningPrize));
                
                // 禁用抽奖按钮
                disableDrawButton();
            }, 3000);
        }
        
        // 显示中奖结果
        function showPrize(prize) {
            // 更新奖品显示
            prizeDisplay.innerHTML = `<i class="fa ${prize.icon} text-5xl ${prize.color} prize-animation"></i>`;
            prizeText.textContent = `恭喜您获得：${prize.name}`;
            prizeText.classList.add('text-green-600');
        }
        
        // 禁用抽奖按钮
        function disableDrawButton() {
            drawBtn.disabled = true;
            drawBtn.classList.add('opacity-70', 'bg-gray-400', 'cursor-not-allowed');
            drawBtn.innerHTML = '<i class="fa fa-check mr-2"></i> 已抽奖';
            drawStatus.classList.remove('hidden');
        }
    </script>
</body>
</html>
    